<template>
    <div>
        <div class="combat_gains_found">
            <div class="title">
                <input type="text" placeholder="请输入战绩表标题" value="" id="praiseName" style="margin-bottom: 0px;" v-model="title" maxlength="15">
                <p>
                    <span id="info_limit">{{title.length}}</span><!-- react-text: 1514 -->/15<!-- /react-text -->
                </p>
            </div>
            <div class="my-data-search">
                <div class="left">
                    <select dir="ltr" v-model="isreturn" @change="cmtype()">
                        <option value="0">全部料</option>
                        <option value="1">返还料</option>
                        <option value="2">普通料</option>
                    </select>
                </div>
                <div class="right"><input type="text" placeholder="请输入料标题" value="" v-model="keyword"><span class="a2" @click="getMsg()"><img src="../../assets/img/icon_search.png"></span></div>
            </div>
            <ul class="u2">
                <p class="box-r4" style="text-align: center; padding: 5px 0px; font-size: 12px; color: rgb(252, 93, 77);">小提示：多次点击料列表，切换设置战绩标签哦~</p>
                <li v-for="(item,index) in list">
                    <div class="box-r4">
                        <!--<img src="../../assets/img/checkedicon.png" class="iconchecked" v-if="item.checked"/>-->
                        <div class="left a1" @click.stop="choseflag(index, item.mtype)">
                            <i class="i_1" v-if="item.mtype==1">红</i>
                            <i class="i_2" v-else-if="item.mtype==2">黑</i>
                            <i class="i_3" v-else-if="item.mtype==3">走</i>
                        </div>
                        <div class="right">
                            <div class="ts">
                                <p class="p1">{{item.createtime}}</p>
                                <p class="p2">{{item.seenumber}}人查看&nbsp;&nbsp;&nbsp;&nbsp;<b class="red_ft">{{item.buynumber}}</b>人购买</p>
                            </div>
                            <div class="bt" style="height: auto">
                                <p><span class="red_ft"></span>{{item.title}}</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="submit">
                <div class="title_box">
                    <p>已选<b class="b1">{{red}}红</b><b class="b2">{{blue}}走</b><b class="b3">{{black}}黑</b></p>
                </div>
                <div class="btn_box"><a class="left" @click="showsyncflag=true">同步料标签</a><a class="right" @click="create()">生成战绩表</a></div>
            </div>
        </div>
        <div class="pop" v-if="showsyncflag">
            <div class="syncflag">
                <div class="title">同步料标签</div>
                <div class="" style="text-align: center; padding: 5px 0px; font-size: 12px; color: rgb(252, 93, 77);">将"我卖的料"列表标签，同步至战绩表</div>
                <div class="content">
                    <div>同步数量</div>
                    <select dir="ltr" v-model="syncnum" @change="changeCount()">
                        <option style="display:none" value="" disabled>请选择</option>
                        <option value="all">全部料</option>
                        <option :value="item" v-for="item in 80">近{{item}}个料</option>
                    </select>
                </div>
                <div class="btn">
                    <div @click="showsyncflag=false">取消</div>
                    <div style="color: #4482e4" @click="sync()">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    var timer;
    export default {
        name: "",
        data(){
            return{
                keyword:"",
                isreturn:0,
                title:"",
                initiallist:[],   //初始列表
                syncnum:0,       //同步料标签数量
                list:[],
                materials:[],
                red:0,
                blue:0,
                black:0,
                zhanjiid:"",
                showsyncflag:false   //同步料标签选框
            }
        },
        mounted(){
            if(this.$route.query && this.$route.query.id){
                this.zhanjiid=this.$route.query.id;
                this.getMsg1();
                document.title = this.$route.query.pagetitle;
            }else {
                this.getMsg();
            }
        },
        methods:{
            changeCount(){
                window.scrollTo(0, 0);
            },
            //同步料标签个数
            sync(){
//                console.log("点击确定");

                var that=this;

                that.showsyncflag=false;
                var syncnum=that.syncnum=="all"?that.list.length:parseInt(that.syncnum);
                if(this.zhanjiid){
                    for(var i=0; i<syncnum; i++){
                        if(i>=that.list.length){
                            break;
                        }
                        that.list[i].mtype=that.list[i].matetype
                    }
                }else {
                    for(var i=0; i<syncnum; i++){
                        if(i>=that.list.length){
                            break;
                        }
                        that.list[i].mtype=that.initiallist[i].mtype
                    }
                }
                that.countmtype()
//                var materials=[];
//                for(var i=0; i<that.list.length; i++){
//                    if(i<syncnum){
//                        materials.push(that.list[i])
//                    }
//                }
//                console.log(materials);
//                that.request1.post1({
//                    url: that.Url + "api/user.zhanji/tbflagSave",
//                    params: {materials:materials},
//                    success: function (res) {
//                        console.log(res)
//                        if (res.data.code == 1) {
//                            that.$toast.success("提交成功");
//                            that.showsyncflag=false;
//                        } else {
//                            alert(res.data.msg)
//                        }
//                    },
//                    fail: function (error) {
//                        alert(error.data.msg)
//                    }
//                });
            },
            cmtype(){
                if(this.zhanjiid){
                    this.getMsg1();
                }else {
                    this.getMsg();
                }
            },
            //创建/修改战绩表
            create(){
                var that=this;
                var data={};
                data["title"]=that.title;
                data["materials"]=that.materials;
                data["zhanjiid"]=that.zhanjiid?that.zhanjiid:"";

                that.request1.post1({
                    url: that.Url + "api/user.zhanji/zhanjiSave",
                    params: data,
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.$toast.success("提交成功");
                            timer=setTimeout(function () {
                                that.$router.go(-1);//返回上一层
                            },2000)
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            choseflag(index,mtype){
                if(mtype==1){
                    this.list[index].mtype=2;
                }else if(mtype==2){
                    this.list[index].mtype=3;
                }else if(mtype==3){
                    this.list[index].mtype=0;
                }else {
                    this.list[index].mtype=1;
                }
                this.countmtype();
            },
            //选择料
//            chose(index){
//                console.log("点击选中");
//                this.list[index].checked=true;
//                this.countmtype();
//            },
            //计算红黑走
            countmtype(){
                this.red=0;
                this.black=0;
                this.blue=0;
                this.materials=[];
                for(var i=0; i<this.list.length; i++){
                    if(this.list[i].mtype==1 || this.list[i].mtype=="1"){
                        this.red+=1;
                        this.materials.push(this.list[i])
                    }else if(this.list[i].mtype==2 || this.list[i].mtype=="2"){
                        this.black+=1;
                        this.materials.push(this.list[i])
                    }else if(this.list[i].mtype==3 || this.list[i].mtype=="3"){
                        this.blue+=1;
                        this.materials.push(this.list[i])
                    }
                }
            },
            getMsg(){
                var that=this;
                that.list=[];
                that.request1.post1({
                    url: that.Url + "api/user.zhanji/createHtml",
                    params: {keyword:that.keyword, isreturn:that.isreturn,},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.initiallist=JSON.parse(JSON.stringify(res.data.data.data));
//                            that.list=res.data.data.data;
                            var list=res.data.data.data;
                            for(var i=0; i<list.length; i++){
                                list[i].checked=false;
                                list[i].mtype=0;
                                that.list.push(list[i])
                            }
                            that.countmtype();
                            console.log(that.initiallist)
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            getMsg1(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.zhanji/editHtml",
                    params: {keyword:that.keyword, isreturn:that.isreturn,zhanjiid:that.zhanjiid},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.title=res.data.data.zhanji.title;
                            that.list=res.data.data.materials.data;
                            that.countmtype();
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .combat_gains_found .title {
        height: 45px;
        background: #fff;
        width: 100%;
        display: -webkit-box;
        top: 0;
        z-index: 1;
        position: fixed;
    }
    .combat_gains_found .title input {
        display: block;
        height: 45px;
        width: 95%;
        padding-left: 5%;
        font-size: 16px;
    }
    .combat_gains_found .title p {
        position: absolute;
        right: 6px;
        top: 18px;
        display: block;
        font-size: 12px;
        color: #999;
        height: 12px;
        line-height: 12px;
    }
    .combat_gains_found .title p span {
        color: #fc5d4d;
    }
    .combat_gains_found .my-data-search {
        display: -webkit-box;
        background: #fff;
        height: 40px;
        position: fixed;
        top: 45px;
        width: 100%;
        z-index: 1;
        border-top: .5px solid #efefef;
        box-shadow: 0 3px 10px rgba(115,117,154,.1);
    }
    .combat_gains_found .my-data-search .left {
        width: 90px;
    }
    button, input, optgroup, select, textarea {
        font-family: sans-serif;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
    }
    .combat_gains_found .my-data-search .left select {
        width: 90px;
        padding-left: 25px;
        text-align: center;
        border: none;
        height: 40px;
        background: url() no-repeat 70px;
        background-size: 10px;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
    }
    .combat_gains_found .my-data-search .right {
        -webkit-box-flex: 1;
        overflow: hidden;
        display: -webkit-box;
        left: 0;
        position: relative;
    }
    .combat_gains_found .my-data-search .right input {
        display: block;
        -webkit-box-flex: 1;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
        background: #efeff4;
        padding: 5px 40px 5px 30px;
        border-radius: 100px;
        margin: 5px 10px;
        text-align: center;
    }
    .combat_gains_found .my-data-search .right span.a2 {
        display: block;
        position: absolute;
        right: 10px;
        top: 5px;
        z-index: 1;
        width: 18px;
        height: 18px;
        background: #4482e4;
        border-radius: 0 50px 50px 0;
        width: 38px;
        height: 30px;
    }
    .combat_gains_found .my-data-search .right span.a2 img {
        display: block;
        width: 15px;
        margin-left: 10px;
        margin-top: 7px;
    }
    .combat_gains_found ul.u2 {
        margin-top: 100px;
        margin-bottom: 80px;
    }
    .box-r4, .red_btn {
        border-radius: 4px;
    }
    .box-r4 {
        display: block;
        background: #fff;
        margin: 7px 10px 0;
        padding: 0 15px;
        overflow: hidden;
    }
    .combat_gains_found ul.u2 li .box-r4 {
        display: -webkit-box;
        position: relative;
    }
    .combat_gains_found ul.u2 li .iconchecked{
        position: absolute;
        bottom: 4px;
        right: 10px;
        width: 20px;
    }
    .combat_gains_found ul.u2 li .left {
        border-right: .5px solid #eee;
        width: 42px;
        margin: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .combat_gains_found ul.u2 li .left.a1 {
        background: url() 0 no-repeat;
        background-size: 30px;
    }
    .combat_gains_found ul.u2 li .right {
        -webkit-box-flex: 1;
        padding-left: 15px;
        margin-top: 6px;
        margin-bottom: 10px;
    }
    .combat_gains_found ul.u2 li .right .ts {
        height: 20px;
        line-height: 20px;
    }
    .combat_gains_found ul.u2 li .right .ts p {
        font-size: 12px;
        color: #999;
    }
    .combat_gains_found ul.u2 li .right .ts p.p1 {
        float: left;
    }
    .combat_gains_found ul.u2 li .right .ts p.p2 {
        float: right;
    }
    .combat_gains_found ul.u2 li .right .bt p {
        display: block;
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
    }
    .red_ft {
        color: #fc5d4d !important;
    }
    .combat_gains_found .submit {
        height: 72px;
        position: fixed;
        background: #fff;
        width: 100%;
        bottom: 0;
        box-shadow: 0 -3px 10px rgba(115,117,154,.1);
    }
    .combat_gains_found .submit .title_box {
        padding-top: 6px;
        padding-left: 12px;
        width: 100%;
        height: 20px;
    }
    .combat_gains_found .submit .title_box p {
        font-size: 12px;
        line-height: 18px;
    }
    .combat_gains_found .submit .title_box p b {
        padding: 0 3px;
        font-weight: 400;
    }
    .combat_gains_found .submit .title_box p b.b1 {
        color: #fc5d4d;
    }
    .combat_gains_found .submit .title_box p b.b2 {
        color: #4482e4;
    }
    .combat_gains_found .submit .title_box p b.b3 {
        color: #838383;
    }
    .combat_gains_found .submit .btn_box {
        display: -webkit-box;
    }
    .combat_gains_found .submit .left, .combat_gains_found .submit .right {
        border-radius: 4px;
        display: block;
        text-align: center;
        line-height: 40px;
        color: #fff;
        margin-right: 10px;
    }
    .combat_gains_found .submit .left {
        background: #5895f6;
        font-size: 12px;
        width: 140px;
        margin-left: 10px;
    }
    .combat_gains_found .submit .right {
        background: #fc5d4d;
        font-size: 14px;
        font-weight: 700;
        -webkit-box-flex: 1;
    }
    .combat_gains_found ul.u2 li .left.a1 i {
        display: inline-block;
        font-style: normal;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
        margin-right: 6px;
    }
    .combat_gains_found ul.u2 li .left.a1 i.i_1 {
        border: .5px solid #ef4433;
        background: #ef4433;
        border-radius: 5px;
        padding: 0 3px;
        color: #fff;
    }
    .combat_gains_found ul.u2 li .left.a1 i.i_2 {
        border: .5px solid #707070;
        background: #707070;
        color: #fff;
        border-radius: 5px;
        padding: 0 3px;
    }
    .combat_gains_found ul.u2 li .left.a1 i.i_3 {
        border: .5px solid #4482e4;
        background: #4482e4;
        border-radius: 5px;
        padding: 0 3px;
        color: #fff;
    }
    .pop{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    .pop .syncflag{
        width: 84%;
        height: 240px;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        left: 8%;
        top: 50%;
        margin-top: -130px;
        padding: 10px;
        box-sizing: border-box;
    }
    .syncflag .title{
        color: #000;
        text-align: center;
        height: 40px;
        line-height: 48px;
        font-size: 16px;
    }
    .syncflag .content{
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        width: 90%;
        margin: auto;
        font-size: 14px;
    }
    .syncflag .content select{
        width: calc(100% - 80px);
        height: 48px;
        padding-left: 25px;
        text-align: center;
    }
    .syncflag .btn{
        width: 100%;
        height: 48px;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #ccc;
    }
    .syncflag .btn div{
        width: 50%;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
    }
    .syncflag .btn div:first-child{
        border-right: 1px solid #ccc;
        box-sizing: border-box;
    }
</style>